<template>
  <div id="app">
    <van-tabbar v-if="!zhuantai">
      <van-tabbar-item :icon="icon1" @click="ic1" :style="styleObj1">首页</van-tabbar-item>
      <van-tabbar-item :icon="icon2" @click="ic2" :style="styleObj2">分类</van-tabbar-item>
      <van-tabbar-item :icon="icon3" @click="ic3" :style="styleObj3" :info="gwcsz">购物车</van-tabbar-item>
      <van-tabbar-item :icon="icon4" @click="ic4" :style="styleObj4">我的</van-tabbar-item>
    </van-tabbar>
    <router-view />
    <div v-if="gwc">{{ic3()}}</div>
    <div>{{chushihuashuzi()}}</div>
  </div>
</template>

<script>
import i1 from "@/assets/gongju/shouye7.png";
import i12 from "@/assets/gongju/shouye7_1.png";
import i2 from "@/assets/gongju/sousuo.png";
import i22 from "@/assets/gongju/sousuo2.png";
import i3 from "@/assets/gongju/gwc2.png";
import i32 from "@/assets/gongju/gwc1.png";
import i4 from "@/assets/gongju/wode_1.png";
import i42 from "@/assets/gongju/wode.png";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "App",
  data() {
    return {
      icon1: i1,
      icon2: i22,
      icon3: i32,
      icon4: i42,
      styleObj1: { color: "#2F84F4" },
      styleObj2: { color: "#000" },
      styleObj3: { color: "#000" },
      styleObj4: { color: "#000" },
  
    
    };
  },
  methods: {
    ...mapMutations(["xggwc"]),
     ...mapMutations(["xggwcsz"]),
    ic1() {
      this.icon1 = i1;
      this.icon2 = i22;
      this.icon3 = i32;
      this.icon4 = i42;
      this.styleObj1 = { color: "#2F84F4" };
      this.styleObj2 = { color: "#000" };
      this.styleObj3 = { color: "#000" };
      this.styleObj4 = { color: "#000" };
      this.$router.push("/item1");
    },
    ic2() {
      this.icon1 = i12;
      this.icon2 = i2;
      this.icon3 = i32;
      this.icon4 = i42;
      this.styleObj1 = { color: "#000" };
      this.styleObj2 = { color: "#2F84F4" };
      this.styleObj3 = { color: "#000" };
      this.styleObj4 = { color: "#000" };
      this.$router.push("/item2");
    },
    ic3() {
      this.icon1 = i12;
      this.icon2 = i22;
      this.icon3 = i3;
      this.icon4 = i42;
      this.styleObj1 = { color: "#000" };
      this.styleObj2 = { color: "#000" };
      this.styleObj3 = { color: "#2F84F4" };
      this.styleObj4 = { color: "#000" };
      this.$router.push("/item3");
      this.xggwc(false);
    },
    ic4() {
      this.icon1 = i12;
      this.icon2 = i22;
      this.icon3 = i32;
      this.icon4 = i4;
      this.styleObj1 = { color: "#000" };
      this.styleObj2 = { color: "#000" };
      this.styleObj3 = { color: "#000" };
      this.styleObj4 = { color: "#2F84F4" };
      this.$router.push("/item4");
    },
    chushihuashuzi(){
  this.$http
      .get(this.poot + "selectcartbyuser/" + this.user)
      .then(response => {
        console.log(response.data);
     this.xggwcsz(response.data.length)
    
      })
      .catch(function(error) {});
    }
  },
  mounted() {
    this.$router.push("/item1");
  this.chushihuashuzi();
  },
  computed: {
    ...mapState(["zhuantai"]),
    ...mapState(["gwc"]),
    ...mapState(["poot"]),
     ...mapState(["user"]),
      ...mapState(["gwcsz"]),
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 40px; */
}
.ict {
  color: #000;
}
</style>
